<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>配送员管理</title>
</head>
<body>
    <div th:fragment="content">
        <div class="container-fluid">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="h3">配送员审核</h2>
                <div>
                    <button class="btn btn-primary" onclick="refreshData()">
                        <i class="fas fa-sync-alt me-1"></i> 刷新数据
                    </button>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-md-6 col-lg-3 mb-3">
                    <div class="stat-card">
                        <div class="stat-card-title">待审核申请</div>
                        <div class="stat-card-value" th:text="${pendingCount}">-</div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 mb-3">
                    <div class="stat-card">
                        <div class="stat-card-title">已批准</div>
                        <div class="stat-card-value" th:text="${approvedCount}">-</div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 mb-3">
                    <div class="stat-card">
                        <div class="stat-card-title">已拒绝</div>
                        <div class="stat-card-value" th:text="${rejectedCount}">-</div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 mb-3">
                    <div class="stat-card">
                        <div class="stat-card-title">注销申请</div>
                        <div class="stat-card-value" th:text="${resignationCount}">-</div>
                    </div>
                </div>
            </div>

            <ul class="nav nav-tabs mb-4" id="courierTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="pending-tab" data-bs-toggle="tab" data-bs-target="#pending" type="button" role="tab">
                        待审核
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="approved-tab" data-bs-toggle="tab" data-bs-target="#approved" type="button" role="tab">
                        已批准
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="rejected-tab" data-bs-toggle="tab" data-bs-target="#rejected" type="button" role="tab">
                        已拒绝
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="resignation-tab" data-bs-toggle="tab" data-bs-target="#resignation" type="button" role="tab">
                        注销申请
                    </button>
                </li>
            </ul>

            <div class="tab-content" id="courierTabsContent">
                <!-- 待审核申请 -->
                <div class="tab-pane fade show active" id="pending" role="tabpanel">
                    <div class="card">
                        <div class="card-body">
                            <div class="table-container">
                                <table class="data-table">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>姓名</th>
                                            <th>联系电话</th>
                                            <th>申请时间</th>
                                            <th>意向区域</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr th:each="courier : ${pendingCouriers}" th:if="${pendingCouriers != null && !pendingCouriers.isEmpty()}">
                                            <td th:text="${courier.courierId}"></td>
                                            <td th:text="${courier.username}"></td>
                                            <td th:text="${courier.phone}"></td>
                                            <td th:text="${#temporals.format(courier.createdAt, 'yyyy-MM-dd HH:mm')}"></td>
                                            <td>
                                                <span th:each="region, iterStat : ${courier.regions}" class="badge badge-primary me-1" th:text="${region}">
                                                </span>
                                            </td>
                                            <td>
                                                <button class="btn btn-sm btn-success me-1" th:onclick="'approveCourier(' + ${courier.courierId} + ')'">
                                                    <i class="fas fa-check"></i> 批准
                                                </button>
                                                <button class="btn btn-sm btn-danger" th:onclick="'rejectCourier(' + ${courier.courierId} + ')'">
                                                    <i class="fas fa-times"></i> 拒绝
                                                </button>
                                            </td>
                                        </tr>
                                        <tr th:if="${pendingCouriers == null || pendingCouriers.isEmpty()}">
                                            <td colspan="6" class="text-center">没有待审核的申请</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 已批准 -->
                <div class="tab-pane fade" id="approved" role="tabpanel">
                    <div class="card">
                        <div class="card-body">
                            <div class="table-container">
                                <table class="data-table">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>姓名</th>
                                            <th>联系电话</th>
                                            <th>批准时间</th>
                                            <th>服务区域</th>
                                            <th>状态</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr th:each="courier : ${approvedCouriers}" th:if="${approvedCouriers != null && !approvedCouriers.isEmpty()}">
                                            <td th:text="${courier.courierId}">1</td>
                                            <td th:text="${courier.username}">张三</td>
                                            <td th:text="${courier.phone}">13812345678</td>
                                            <td th:text="${#temporals.format(courier.createdAt, 'yyyy-MM-dd HH:mm')}">2023-06-20 10:30</td>
                                            <td>
                                                <span th:each="region, iterStat : ${courier.regions}" class="badge badge-primary me-1" th:text="${region}">
                                                    区域名称
                                                </span>
                                            </td>
                                            <td>
                                                <span th:if="${courier.currentStatus == 'online'}" class="badge badge-success">在线</span>
                                                <span th:if="${courier.currentStatus == 'offline'}" class="badge badge-danger">离线</span>
                                                <span th:if="${courier.currentStatus == 'delivering'}" class="badge badge-warning">配送中</span>
                                            </td>
                                        </tr>
                                        <tr th:if="${approvedCouriers == null || approvedCouriers.isEmpty()}">
                                            <td colspan="6" class="text-center">没有已批准的申请</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 已拒绝 -->
                <div class="tab-pane fade" id="rejected" role="tabpanel">
                    <div class="card">
                        <div class="card-body">
                            <div class="table-container">
                                <table class="data-table">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>姓名</th>
                                            <th>联系电话</th>
                                            <th>申请时间</th>
                                            <th>拒绝时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr th:each="courier : ${rejectedCouriers}" th:if="${rejectedCouriers != null && !rejectedCouriers.isEmpty()}">
                                            <td th:text="${courier.courierId}">1</td>
                                            <td th:text="${courier.username}">张三</td>
                                            <td th:text="${courier.phone}">13812345678</td>
                                            <td th:text="${#temporals.format(courier.createdAt, 'yyyy-MM-dd HH:mm')}">2023-06-20 10:30</td>
                                            <td th:text="${#temporals.format(courier.lastLogin, 'yyyy-MM-dd HH:mm')}">2023-06-20 11:15</td>
                                            <td>
                                                <button class="btn btn-sm btn-primary" th:onclick="'reconsiderCourier(' + ${courier.courierId} + ')'">
                                                    <i class="fas fa-redo"></i> 重新考虑
                                                </button>
                                            </td>
                                        </tr>
                                        <tr th:if="${rejectedCouriers == null || rejectedCouriers.isEmpty()}">
                                            <td colspan="6" class="text-center">没有已拒绝的申请</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 注销申请 -->
                <div class="tab-pane fade" id="resignation" role="tabpanel">
                    <div class="card">
                        <div class="card-body">
                            <div class="table-container">
                                <table class="data-table">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>姓名</th>
                                            <th>联系电话</th>
                                            <th>申请时间</th>
                                            <th>总订单数</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr th:each="courier : ${resignationCouriers}" th:if="${resignationCouriers != null && !resignationCouriers.isEmpty()}">
                                            <td th:text="${courier.courierId}">1</td>
                                            <td th:text="${courier.username}">张三</td>
                                            <td th:text="${courier.phone}">13812345678</td>
                                            <td th:text="${#temporals.format(courier.lastLogin, 'yyyy-MM-dd HH:mm')}">2023-06-20 10:30</td>
                                            <td th:text="${courier.totalOrders}">120</td>
                                            <td>
                                                <button class="btn btn-sm btn-success me-1" th:onclick="'approveResignation(' + ${courier.courierId} + ')'">
                                                    <i class="fas fa-check"></i> 批准
                                                </button>
                                                <button class="btn btn-sm btn-danger" th:onclick="'rejectResignation(' + ${courier.courierId} + ')'">
                                                    <i class="fas fa-times"></i> 拒绝
                                                </button>
                                            </td>
                                        </tr>
                                        <tr th:if="${resignationCouriers == null || resignationCouriers.isEmpty()}">
                                            <td colspan="6" class="text-center">没有注销申请</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            function refreshData() {
                location.reload();
            }

            function approveCourier(courierId) {
                if (confirm('确定要批准该配送员申请吗？')) {
                    fetch(`/admin/api/delivery/couriers/${courierId}/audit?status=approved`, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    })
                    .then(response => {
                        if (response.ok) {
                            return response.json().then(data => {
                                alert('已批准该配送员申请');
                                location.reload();
                            });
                        } else {
                            return response.json().then(data => {
                                alert('操作失败: ' + data.message);
                            }).catch(() => {
                                alert('操作失败，请重试');
                            });
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('操作失败，请重试');
                    });
                }
            }

            function rejectCourier(courierId) {
                if (confirm('确定要拒绝该配送员申请吗？')) {
                    fetch(`/admin/api/delivery/couriers/${courierId}/audit?status=rejected`, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    })
                    .then(response => {
                        if (response.ok) {
                            return response.json().then(data => {
                                alert('已拒绝该配送员申请');
                                location.reload();
                            });
                        } else {
                            return response.json().then(data => {
                                alert('操作失败: ' + data.message);
                            }).catch(() => {
                                alert('操作失败，请重试');
                            });
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('操作失败，请重试');
                    });
                }
            }

            function reconsiderCourier(courierId) {
                if (confirm('确定要重新考虑该配送员申请吗？')) {
                    fetch(`/admin/api/delivery/couriers/${courierId}/audit?status=pending`, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    })
                    .then(response => {
                        if (response.ok) {
                            return response.json().then(data => {
                                alert('已将该申请状态改为待审核');
                                location.reload();
                            });
                        } else {
                            return response.json().then(data => {
                                alert('操作失败: ' + data.message);
                            }).catch(() => {
                                alert('操作失败，请重试');
                            });
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('操作失败，请重试');
                    });
                }
            }

            function approveResignation(courierId) {
                if (confirm('确定要批准该配送员的注销申请吗？')) {
                    fetch(`/admin/api/delivery/couriers/${courierId}/audit?status=resigned`, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    })
                    .then(response => {
                        if (response.ok) {
                            return response.json().then(data => {
                                alert('已批准该配送员的注销申请');
                                location.reload();
                            });
                        } else {
                            return response.json().then(data => {
                                alert('操作失败: ' + data.message);
                            }).catch(() => {
                                alert('操作失败，请重试');
                            });
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('操作失败，请重试');
                    });
                }
            }

            function rejectResignation(courierId) {
                if (confirm('确定要拒绝该配送员的注销申请吗？')) {
                    fetch(`/admin/api/delivery/couriers/${courierId}/audit?status=active`, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    })
                    .then(response => {
                        if (response.ok) {
                            return response.json().then(data => {
                                alert('已拒绝该配送员的注销申请');
                                location.reload();
                            });
                        } else {
                            return response.json().then(data => {
                                alert('操作失败: ' + data.message);
                            }).catch(() => {
                                alert('操作失败，请重试');
                            });
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('操作失败，请重试');
                    });
                }
            }

            // 在页面加载时标记当前菜单为活动状态
            document.addEventListener('DOMContentLoaded', function() {
                document.querySelectorAll('.sidebar-menu a').forEach(a => {
                    a.classList.remove('active');
                });
                document.getElementById('menu-courier-management').classList.add('active');
            });
        </script>
    </div>
</body>
</html>
